<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-09-15 14:20:16
 * @LastEditors: raoyonggang 11886335+ryg321@user.noreply.gitee.com
 * @LastEditTime: 2024-06-14 10:38:56
 * @FilePath: \v9\src\views\index\components\EncloCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="contents">
    <!-- 标题 -->
    <div class="contents-title">
      <div class="contents-title-left">
        <div class="flex">
          <div class="line"></div>
          <span class="span">{{ item.name }}</span>
        </div>
        <div class="mainin_qxs_a" v-if="item.select">
          <el-select
            v-model.trim="cycleid"
            class="wid80"
            @change="cycleChange(item, cycleid)"
          >
            <el-option
              v-for="(item, index) in cycledata"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="contents-title-right" v-if="item.rightIcon">
        <el-tooltip
          class="item"
          :effect="multipleList.length ? 'light' : 'dark'"
          :content="item.rightIcon.iconName"
          placement="bottom"
          :popper-class="multipleList.length ? 'multiple-tooltip' : ''"
        >
          <div slot="content" class="slot-content" v-if="multipleList.length">
            <p v-for="item in multipleList" :key="item.path" @click="goPath(item)">{{ item.name }}</p>
          </div>
          <img
            :style="{
              width: `${item.rightIcon.iconWidth}px`,
              height: `${item.rightIcon.iconHeight}px`,
            }"
            :src="item.rightIcon.iconSrc"
            @click.stop="jumpbigdata(item)"
          />
        </el-tooltip>
      </div>
    </div>

    <!-- 小卡片 -->
    <slot name="header"></slot>
  </div>
</template>

<script>
export default {
  props: {
    // 卡片基本信息
    item: {
      type: Object,
      default: () => {},
    },
    minHeihgt: {
      type: Number,
      default: 400,
    },
    //  大屏切换
    multipleList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 筛选
      cycledata: [
        {
          id: 1,
          name: "一周",
        },
        {
          id: 2,
          name: "半个月",
        },
        {
          id: 3,
          name: "一个月",
        },
      ],
      cycleid: 1,
    };
  },
  methods: {
    jumpbigdata(item) {
      !this.multipleList.length && this.$emit('opendown', item)
    },
    goPath(item) {
      console.log(item);
      this.$router.push(item.path)
    },
    cycleChange(item, cycleChange) {
      let data = {
        cycleid: cycleChange,
      };
      let query = Object.assign(data, item);
      this.$emit('changeEcharts', query)
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.contents {
  width: 100%;
  min-height: 400px;
  height: 410px;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  &-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    line-height: 30px;
    &-left {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .line {
        width: 4px;
        height: 12px;
        background: $title_left_line;
      }
      .span {
        margin-left: 4px;
        font-weight: 800;
        color: $new_text_color_85;
        font-size: $ordinary_font_size;
      }
    }
  }

  .card {
    margin-top: 10px;
    .cardBox {
      padding: 12px 15px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      background: #f7faf7;
      border-radius: 10px;
      // margin-bottom: 14px;
      img {
        width: 100%;
        height: 100%;
      }
      .cardBox_span {
        margin-left: 9px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &-title {
          font-weight: 500;
          font-size: $ordinary_font_size;
          color: $auxiliary_font_color;
        }
        &-num {
          margin-top: 18px;
          font-size: $theme_font_size;
          color: $theme_font_color;
          font-weight: 800;
        }
      }
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 8px 0px rgba(4, 0, 0, 0.1);
      }
    }
    .nullCardBox {
      min-height: 79px;
      padding: 12px 15px 12px 40px;
      align-items: flex-end;
      display: flex;
      background: #f7faf7;
      border-radius: 10px;
      // margin-bottom: 14px;
      &-title {
        color: $theme_font_color;
        font-weight: 800;
        font-size: $theme_font_size;
        letter-spacing: 5px;
      }
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 8px 0px rgba(4, 0, 0, 0.1);
      }
    }
  }
}

.mainin_qxs_a {
  margin-left: 10px;

  /deep/.el-input__inner {
    border: none !important;
    font-size: $font_12;
    padding-right: 10px;
  }

  /deep/.el-select__caret {
    color: $colour_18;
    line-height: 31px;
  }
  /deep/.el-input--small .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
}
.flex {
  display: flex;
  align-items: center;
}
.slot-content {
  p {
    cursor: pointer;
    color: rgba(0,0,0,0.85);
    &:hover {
      color: #03A98E;
    }
    &:first-child {
      margin-bottom: 4px;
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
  }
}
</style>